import React, { useState } from 'react';
import { Form, Field, Dialog } from 'react-vant'
import { withRouter } from 'react-router-dom'
import request from '../../../utils/request';
function RegLog(props) {
    let { telNum } = props //手机号
    const [pasw, setpasw] = useState() //密码
    const [switchs, setswitchs] = useState(true) //切换登录方式
    const [Ver, setVer] = useState(true) //获取验证码开关
    let [time, settime] = useState(10) //获取验证码倒计时
    const [vercode, setvercode] = useState() //验证码
    const [vernum, setvernum] = useState() //输入的验证码
    const [Userid, setUserid] = useState() //用户的id
    return (
        <div>
            <div className='Regtitle'>
                手机号登录
            </div>
            <div className='inpbox'>
                <Form>
                    <Form.Item
                        name="text1"
                        label="手机号"
                    >
                        <Field readonly placeholder={`+86${telNum}`} />
                    </Form.Item>
                    {
                        switchs ? <Form.Item
                            name="text2"
                            label="密码"
                        >
                            <Field placeholder="请填写密码" type="password" onChange={(e) => {
                                setpasw(e)
                            }} />
                        </Form.Item> : <div> <Form.Item
                            name="text3"
                            label="验证码"
                        >
                            <Field placeholder="请填写验证码" onChange={(e) => {
                                setvernum(e)
                            }} />
                        </Form.Item>
                            <button className='verification' onClick={() => {
                                // 倒计时
                                const timer = setInterval(() => {
                                    settime(time--)
                                    setVer(false)
                                    if (time < 0) {
                                        clearInterval(timer);
                                        settime(10);
                                        setVer(true)
                                    };
                                }, 1000);
                                request.post('my/verification', { telNum }).then((res) => {
                                    console.log(res);
                                    if (res.data.code === 1) {
                                        setvercode(res.data.vercode)
                                        setUserid(res.data.Userid)
                                    } else {
                                        Dialog.alert({
                                            message: '该手机还没有注册'
                                        })
                                    }
                                })
                            }}>{
                                    Ver ? '获取验证码' : `${time}后新获取`
                                }</button>
                        </div>
                    }
                </Form>
                <p onClick={() => {
                    setswitchs(!switchs)
                }}>
                    {
                        switchs ? <span>用短信验证码登录</span> : <span>用密码登录</span>
                    }
                </p>
            </div>
            <div className='Btn_box'>
                <button onClick={() => {
                    if (switchs) {
                        if (pasw) {
                            request.post('/my/phoneNum', {
                                telNum,
                                pasw
                            }).then((res) => {
                                console.log(res);
                                if (res.data.code === 0) {
                                    // localStorage.setItem('token', res.data.Userid)
                                    console.log(res.data);
                                    localStorage.setItem('token', JSON.stringify(res.data.data))
                                    props.history.push('/main')
                                } else {
                                    Dialog.alert({
                                        message: res.data.message,
                                    }).then(() => {
                                        // on close
                                    });
                                }
                            })
                        } else {
                            Dialog.alert({
                                title: '请填写密码',
                                message: '请填写密码或密码错误',
                            }).then(() => {
                                // on close
                            });
                        }
                    } else {
                        if (vernum) {
                            if (vercode === vernum) {
                                localStorage.setItem('token', Userid)
                                props.history.push('/main')
                            } else {
                                Dialog.alert({
                                    message: '验证码错误',
                                })
                            }
                        } else {
                            Dialog.alert({
                                message: '请输入验证码',
                            })
                        }
                    }
                }}>登录 </button>
            </div>
        </div>
    );
}
export default withRouter(RegLog)
